<template>
	<view>
		<view class="flexlist-item mgt-5" v-if="requestRelationList.length!==0">
			<fa-icon type="users" size="32"  color="green" class="flexlist-img  flex flex-jc-center flex-ai-center" ></fa-icon>
			<view class="flex-1 flex  flex-ai-center">
				<view class="cl1 f22">新用户申请</view>
			</view>
			<view class="flex-jc-center flex-ai-center " style="display: flex;" >
				<view class="btn-small"> 
					<navigator url="/pages/chat/request-relation" open-type="navigate">查看</navigator>
				</view>
			</view>
		</view>
		<view>
			聊天测试请在大厅直接聊天，暂时没有写聊天跳转
		</view>
		<view v-for="item in relationList" :key="item.id" class="flexlist-item">
			<img :src="item.figureurl" class="flexlist-img" />
			<view class="flex-1">
				<view class="cl1 mgb-5 mgt-5">{{item.nickname}} </view>
				<view class="cl2">用户没有备注签名</view>
			</view>
			<view class="flex-jc-center" >
				<view   class="btn-small mgr-10">好友</view>
			</view>
		</view>
		<bottom-nav  :list='bottomNavList' @on-click='changeNav'></bottom-nav>
	</view>
</template>

<script>
	import bottomNav from '@/common/mixins/bottom-nav.js'
	import chatSend from '@/common/mixins/chat_send.js'
	import {SocketModul} from '@/common/config.js'
	import uniSwipeAction from "@/components/uni-swipe-action/uni-swipe-action.vue"
	export default {
		mixins:[bottomNav,chatSend],
		components: {uniSwipeAction},
		data() {
			return {
				options: [{
							text: '取消',
							style: {
									backgroundColor: '#007aff'
							}
					}, {
							text: '确认',
							style: {
									backgroundColor: '#dd524d'
							}
				}]
			}
		},
		computed:{
			requestRelationList(){
				let arr=[]
				for (let key in this.$store.state.chat.requestRelationList) {
					arr.push(this.$store.state.chat.requestRelationList[key])
				}
				return arr
			},
			// 好友列表
			relationList(){
				return this.$store.state.chat.relationList
			}
			
		},
		onLoad() {
			
		},
		onShow(){
			if(this.isSocketOpen && this.ischatOnline){
				this.pageInit()
			}
		},
		
		methods: {
			pageInit(){
				this.getRelation()
				this.getRequestRelationList()
			},
			// 好友请求列表
			bindClick(item){
				console.log(item)
			},
			//进入一对一聊天
			goChat(item){
				item=item.id||item
				this.$store.commit('changPrivateiId',item)
				uni.navigateTo({
				    url: '/pages/chat/chat?id='+item
				});
			},
			//取得好友申请列表
			getRequestRelationList(){
				let module= SocketModul ,action='getRequestRelation',send_id=this.user_info.id
				let tpl={module,action,data:{send_id}}
				this.sendSocketMessage(tpl)
			},
			//取得好友列表
			getRelation(){
				let module= SocketModul ,action='getRelation',send_id=this.user_info.id
				let tpl={module,action,data:{send_id}}
				this.sendSocketMessage(tpl).then(()=>{console.log('suee')})
			}
		}
	}
</script>

<style>
	.page{
	    /*距离顶部范围应该在118-122范围内*/
	    padding-bottom: 118upx;
	}
	 .pBox{
	 	position: fixed;
	 	top: 90px;
	 	right: 0px;
	 	background-color: #fff;
	 	padding: 5px;
	 }
	 /* #ifdef H5 */
	 .pBox{
	 	top:120px
	 }
	 /* #endif */
	 .pBox-item{
	  
	 	text-align: center;
	 	width: 18px;
	 	height: 18px;
	 	line-height: 18px;
	 	font-size: 12px;
	 	
	 }
	 .pBox-active{
	 	background-color: #eee;
	 	border-radius: 20px;
	 }
</style>
